<%--
  Created by IntelliJ IDEA.
  User: Asus
  Date: 2020/8/1
  Time: 15:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
    <title>理财产品信息</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            position: relative;
        }

        .menu {
            width: 600px;
            margin: 0 auto;
            text-align: center;
            margin-top: 20px;
            margin-bottom: 5px;
        }

        table {
            width: 600px;
            margin: 0px auto;
        }

        table td {
            color: #666666;
            height: 30px;
            width: 100px;
            border: 1px solid #f5f5f5;
            text-align: center;
            vertical-align: middle;
            box-shadow: 0 0 2px #666;
        }

        table tr:first-child td:nth-of-type(1) {
            width: 90px;
        }

        .product tr:first-child td {
            border: none;
            box-shadow: 0 0 0;
        }

        input {
            width: 70px;
        }

        .bookName {
            width: 100px;
            height: 25px;
            color: #666;
        }
        .detail{
            color: red;
            text-decoration: none;
        }
    </style>
</head>
<body>
<div  class="menu">
    图书名称:
    <input type="text" name="bookName" class="bookName"/>
    作者信息:
    <input type="text" name="bookAuthor" class="bookAuthor"/>
    类别：
    <select name="bookType" id="bookType">
        <option value="0">--请选择--</option>
        <option value="历史">历史</option>
        <option value="科普">科普</option>
        <option value="武侠">武侠</option>
        <option value="曲艺">曲艺</option>
    </select>

    <button class="search" style="width: 80px;height: 30px; background-color: aquamarine">搜索</button>

</div>
<table cellpadding="0" cellspacing="0" class="book">


    <tr >
        <td>图书名称</td>
        <td>作者</td>
        <td>类别</td>
        <td>查看详情</td>
    </tr>
</table>

<script type="text/javascript" src="${ctx}/js/jquery-1.8.2.min.js"></script>
<script>
    $(function () {
        //初始化信息
        function init() {
            $.ajax({
                "url": "${ctx}/query",
                "type": "post",
                "dataType": "json",
                "success": callback,
                "error": function (a, b) {
                    alert("出现" + b + "错误");
                }
            })
        }

        init();
        $(".search").click(function () {
            var bookName = $("input[name='bookName']").val();
            var bookAuthor = $("input[name='bookAuthor']").val();
            var bookType = $("#bookType option:selected").val();
            if (bookType == "0") {
                bookType = null;
            }
            $.ajax({
                "url": "${ctx}/query",
                "type": "post",
                "data": {"bookName":bookName,"bookAuthor":bookAuthor,"bookType":bookType},
                "dataType": "json",
                "success": callback,
                "error": function (a, b) {
                    alert("出现" + b + "错误");
                }
            });
        })

        function callback(data) {
            var $table = $(".book").empty();
            $table.append("<tr><td>图书名称</td><td>作者</td><td>类别</td><td>查看详情</td></tr>");
            for (var i=0;i<data.length;i++) {
                var $book = $("<tr><td>"+data[i].bookName+"</td><td>"+data[i].bookAuthor+"</td><td>"+data[i].bookType+"</td><td><a class='detail' href='${ctx}/detail?bookId="+data[i].bookId+"'>详情</a></td></tr>");
                $table.append($book);
            }
            $(".book").find("tr:even").css("background-color", "aquamarine");
            $(".book").find("tr:odd").css("background-color", "lightblue");
        }
    })
</script>
</body>
</html>